<template>
    <div>
        <!-- 关闭底部按钮,关闭遮罩,关闭点击遮罩对话框消失 -->
        <a-modal style=" top: 5vh" :footer="null" :mask="false" :maskClosable="false" :visible="isShow"
            @cancel="cancelSend">
            <template #title>
                <div ref="modalTitleRef" style="width: 100%; cursor: move">事件查询结果</div>
            </template>
            <template #modalRender="{ originVNode }">
                <div :style="transformStyle">
                    <component :is="originVNode" />
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script setup>
import { ref, computed, watch, watchEffect, reactive, onMounted, toRefs } from "vue";
/* 实现拖拽 */
import { useDraggable } from '@vueuse/core';
/* 接收父组件的数据 */
const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    },
})
/* 拿到父组件的数据 */
let { isShow  } = toRefs(props)

const emit = defineEmits(['changeIsShow'])
/* 点击取消 隐藏表单 */
function cancelSend() {
    // isShow.value = false;
    emit('changeIsShow', false)
}
/* ------------------------------------------------ *
/* const showModal = () => {
    visible.value = true;
}; */
/* ------------------------------------ */
const modalTitleRef = ref(null);
const {
    x,
    y,
    isDragging,
} = useDraggable(modalTitleRef);

const startX = ref(0);
const startY = ref(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
});
watch([x, y], () => {
    if (!startedDrag.value) {
        startX.value = x.value;
        startY.value = y.value;
        const bodyRect = document.body.getBoundingClientRect();
        const titleRect = modalTitleRef.value.getBoundingClientRect();
        dragRect.value.right = bodyRect.width - titleRect.width;
        dragRect.value.bottom = bodyRect.height - titleRect.height;
        preTransformX.value = transformX.value;
        preTransformY.value = transformY.value;
    }
    startedDrag.value = true;
});
watch(isDragging, () => {
    if (!isDragging) {
        startedDrag.value = false;
    }
});
watchEffect(() => {
    if (startedDrag.value) {
        transformX.value = preTransformX.value + Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) - startX.value;
        transformY.value = preTransformY.value + Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) - startY.value;
    }
});
const transformStyle = computed(() => {
    return {
        transform: `translate(${transformX.value}px, ${transformY.value}px)`,
    };
});
</script>
<style scoped>
.ant-table-striped :deep(.table-striped) td {
    background-color: #fafafa;
}
</style>
<style>
.ant-pagination {
    position: unset !important
}
</style>
